<template>
    <div class="dayReport1 contanter">
        <div class="center fontSize16 fontbold mt20 mb20">{{nowDate}}线上报表</div>
        <div class="mb20">
            <van-dropdown-menu active-color="#1989fa">
                <van-dropdown-item v-model="value1" :options="option" />
                <van-dropdown-item  v-model="dateVal" @open='goOpen' :options="dateList" ref="item">
                </van-dropdown-item>
            </van-dropdown-menu>
        </div>
        <!-- <div class="wd100 center">
            <div class="fontbold fontSize16">歌力思</div> 
        </div> -->
        <!-- <div class="fontSize12 color999 right contanter mb10">日期：2022年6月9日</div> -->
        <div class=" flex alignCenter ">
            
            <div class="w22 fontSize12 center subTitle">
                <div class="H09 borderGray colorBlueBg colorfff">指标/渠道</div>
                <div class="H09 borderGray">当日销售(万)</div>
                <div class="H09 borderGray">新增会员数</div>
                <div class="H09 borderGray">新增粉丝数</div>
                <div class="H09 borderGray">客单价</div>
                <div class="H09 borderGray">转化率</div>
                <div class="H09 borderGray">月累GMV(万)</div>
                <div class="H09 borderGray">月累净销(万)</div>
            </div>
            <div v-for="(item,index) in channelList" :key='index' class="flex1">
                <div class="H09 borderGray colorBlueBg colorfff fontbold">{{item.name}}</div>
                <div class="H09 borderGray">{{item.saleVolume}}</div>
                <div class="H09 borderGray">{{item.fansNum}}</div>
                <div class="H09 borderGray">{{item.addFansNum}}</div>
                <div class="H09 borderGray">{{item.customerPrice}}</div>
                <div class="H09 borderGray">{{item.conversionRate}}</div>
                <div class="H09 borderGray">{{item.GMV}}</div>
                <div class="H09 borderGray">{{item.netSales}}</div>
            </div>
        </div>
        <van-calendar v-model="show" @confirm="onConfirmDate" :min-date="minDate" :max-date="maxDate" />
    </div>
</template>
<script>
export default {
    data(){
        return{
            value1:1,
            option: [
                { text: '歌力思', value: 1 },
                { text: 'Laurèl', value: 2 },
                { text: 'ED-hardly', value: 3 },
                { text: 'IRO', value: 4 },
                { text: 'self-portait', value: 5 },
            ],
            // channelList:[
            //     {name:'天猫',list:[{name:'当日销售(万)',saleVolume:50,fansNum:200,addFansNum:50,customerPrice:2152,conversionRate:30,GMV:5210,netSales:150}]}
            // ]
            channelList:[{name:'天猫',titleTxt:'当日销售(万)',saleVolume:50,fansNum:200,addFansNum:50,customerPrice:2152,conversionRate:30,GMV:5210,netSales:150},{name:'小程序',titleTxt:'当日销售(万)',saleVolume:50,fansNum:200,addFansNum:50,customerPrice:2152,conversionRate:30,GMV:5210,netSales:150},{name:'唯品会',titleTxt:'当日销售(万)',saleVolume:50,fansNum:200,addFansNum:50,customerPrice:2152,conversionRate:30,GMV:5210,netSales:150},{name:'总计',titleTxt:'当日销售(万)',saleVolume:150,fansNum:600,addFansNum:150,customerPrice:6542,conversionRate:90,GMV:15201,netSales:450}],
            show:false,
            dateVal:'',
            dateList:[],
            minDate: '',
            maxDate: '',
            nowDate:''
        }
    },
    created(){
        var date=new Date()
        var preDate=new Date(date.getTime() - (24*60*60*1000))
        let year=preDate.getFullYear()
        let month=preDate.getMonth() + 1
        let day= preDate.getDate()
        this.nowDate=`${year}-${month}-${day}`
        console.log('年月日',year,month,day)
        let obj={
            text: this.nowDate, value: day
        }
        this.dateVal=day
        this.dateList=[obj]
        this.minDate=new Date(2021, month, day)
        this.maxDate=new Date(year, preDate.getMonth(), day)
    },
    methods:{
        goOpen(){
            this.show=true
        },
         onConfirmDate(date){
            // console
            this.show=false
            let activeDate=`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
            this.dateList=[{text:activeDate,value:date.getDate()}]
            this.dateVal=date.getDate()
            this.nowDate=activeDate
            // this.getDayReportByRegion()
        }
    }
}
</script>
<style >
.dayReport1 .van-overlay{
    background-color: rgba(0, 0, 0, 0.9)
}
</style>
<style lang="less" scoped>
.contanter{
    width: 92%;
    margin: 0 auto;
    .borderGray{border:1px #ebeef5 solid;display: flex;align-items: center;justify-content: center;}
    .subTitle{
        background-color: #f5f7fa;
    }
    .w22{
        width: 22%;
    }
    .colorBlueBg{background-color: #4873c1;}
    .H09{
        height: 0.8rem;
        // line-height: 0.8rem;
    }
}
</style>